<script lang="ts" setup>
import BaseButton from "@/components/BaseButton/index.vue";
import BaseUpDown from "@/components/BaseUpDown/index.vue";
import BaseCollapse from "@/components/BaseCollapse/index.vue";
import useSearch from "@/hooks/useSearch";
import useData from "./hooks/useData";
import { useUserStore } from "@/stores/modules/user";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { formatDate } from "@/utils";

const { pageData } = useData();
import { deleteData, getDataByPage } from "@/api/modules/system/account";
import {
  blockTab,
  getBlocks,
  ifaceGlobalList,
  ifaceGlobalSet,
  l7srvcfgRuleGet,
  l7srvcfgRuleSet
} from "@/api/modules/control-strategy/alarm-blocking";
import UpdateForm from "./components/UpdateForm/index.vue";
import UpdateFormPassword from "./components/UpdateFormPassword/index.vue";
import { showFullScreenLoading, tryHideFullScreenLoading } from "@/components/Loading/fullScreen";

const userStore = useUserStore();
const username = computed(() => userStore.userInfo.name);
const { tableData, loadData, formData, reloadData } = useSearch({
  defaultData: {
    isWarnCount: 1,
    warn_rule: false,
    plug_rule: false,
    isBlockCount: 1,
    login_warn: false,
    loginWarnBlock: false,
    loginWarnCount: 0
  },
  responseKey: {
    list: "result.data",
    total: "result.total"
  }
});

import { computed } from "vue";

// 获取访问哨兵
const ifaceForm = ref();

async function getIfaceGlobalList() {
  const res = await ifaceGlobalList();
  console.log(res);
  ifaceForm.value = res;
  if (Number(res.warn_rule) > 0) {
    formData.warn_rule = true;
    formData.isWarnCount = Number(res.warn_rule);
  } else {
    formData.warn_rule = false;
  }
  if (Number(res.plug_rule) > 0) {
    formData.plug_rule = true;
    formData.isBlockCount = Number(res.plug_rule);
  } else {
    formData.plug_rule = false;
  }
}

getIfaceGlobalList();

async function setIfaceGlobalList() {
  const res = await ifaceGlobalSet({
    ...ifaceForm.value,
    warn_rule: formData.warn_rule ? String(formData.isWarnCount) : "0",
    plug_rule: formData.plug_rule ? String(formData.isBlockCount) : "0"
  });
  // ElMessage.success("保存成功");
  getIfaceGlobalList();
}

// 获取访问伪装服务
const blockForm = ref();

async function getRuleList() {
  const res = await l7srvcfgRuleGet();
  console.log("aaaaa=", res);
  formData.login_warn = Boolean(res.login_warn);
  formData.loginWarnBlock = Boolean(Number(res.high_times) || Number(res.low_times) || Number(res.mid_times));
  formData.loginWarnCount = Number(res.high_times) || 1;
  blockForm.value = res;
}

getRuleList();

async function setRuleList() {
  const res = await l7srvcfgRuleSet({
    hsrule: JSON.stringify({
      login_warn: Number(formData.login_warn),
      high_times: formData.loginWarnBlock ? String(formData.loginWarnCount) : "0",
      low_times: formData.loginWarnBlock ? String(formData.loginWarnCount) : "0",
      mid_times: formData.loginWarnBlock ? String(formData.loginWarnCount) : "0"
    })
  });
  // ElMessage.success("保存成功");
  getRuleList();
}

// 获取列表数据
const loading = ref(false);

async function getTableData() {
  try {
    loading.value = true;
    const tabs = await blockTab();
    console.log("tabs,", tabs);
    if (tabs.data?.length) {
      let arr = [];
      for await (const arrElement of tabs.data) {
        const getBlocksRes = await getBlocks({
          ifid: arrElement.ifid,
          curpage: 0,
          perpage: 10
        });
        console.log("getBlocksRes ", getBlocksRes);
        if (getBlocksRes.data?.length) {
          getBlocksRes.data = getBlocksRes.data.map(item => {
            return {
              ...item,
              ifname: arrElement.ifname
            };
          });
          arr = arr.concat(getBlocksRes.data);
        }
      }
      arr = arr.map((item, index) => {
        return {
          ...item,
          uptime: formatDate(item.uptime),
          no: index + 1
        };
      });
      tableData.list = arr;
      loading.value = false;
      console.log("arr::", arr);
    } else {
      tableData.list = [];
      loading.value = false;
    }
  } catch (e) {
    loading.value = false;
  }
}

getTableData();

async function save() {
  await setIfaceGlobalList();
  await setRuleList();
  ElMessage.success("保存成功");
}

function getData() {
  getIfaceGlobalList();
  getRuleList();
}
</script>

<template>
  <BaseUpDown>
    <template #up>
      <div>
        <BaseCollapse title="">
          <div class="h-box">
            <el-form-item label-width="97px" label="节点安全策略">
              <el-form-item label="">
                <el-checkbox v-model="formData.warn_rule" label="" />
              </el-form-item>
              <el-form-item label="">
                <div class="h-box">
                  <div v-if="formData.warn_rule">
                    <el-select v-model="formData.isWarnCount" style="width: 100px">
                      <el-option :value="1" label="1次" />
                      <el-option :value="3" label="3次" />
                      <el-option :value="5" label="5次" />
                      <el-option :value="10" label="10次" />
                    </el-select>
                  </div>
                  <div>告警</div>
                </div>
              </el-form-item>
              <el-form-item label="" class="mg-l-lg">
                <el-checkbox v-model="formData.plug_rule" label="" />
              </el-form-item>
              <el-form-item label="">
                <div class="h-box">
                  <div v-if="formData.plug_rule">
                    <el-select v-model="formData.isBlockCount" style="width: 100px">
                      <el-option :value="1" label="1次" />
                      <el-option :value="3" label="3次" />
                      <el-option :value="5" label="5次" />
                      <el-option :value="10" label="10次" />
                    </el-select>
                  </div>
                  <div>封堵</div>
                </div>
              </el-form-item>
              <!--            <div class="mg-l-sm">-->
              <!--              <base-button @click="setIfaceGlobalList" type="save_icon_text"></base-button>-->
              <!--            </div>-->
            </el-form-item>
            <el-form-item class="mg-l-lg" label-width="97px" label="服务安全策略">
              <el-form-item label="">
                <!--              登录及告警-->
                <el-checkbox v-model="formData.login_warn" label="告警" />
              </el-form-item>
              <el-form-item label="" class="mg-l-lg">
                <el-checkbox v-model="formData.loginWarnBlock" label="" />
              </el-form-item>
              <el-form-item label="">
                <div class="h-box">
                  <div v-if="formData.loginWarnBlock">
                    <el-select v-model="formData.loginWarnCount" style="width: 100px">
                      <el-option :value="1" label="1次" />
                      <el-option :value="3" label="3次" />
                      <el-option :value="5" label="5次" />
                      <el-option :value="10" label="10次" />
                    </el-select>
                  </div>
                  <div>封堵</div>
                </div>
              </el-form-item>
              <div class="mg-l-sm">
                <base-button @click="save" type="save_icon_text"></base-button>
                <base-button @click="getData" type="refresh_icon_text_small"></base-button>
              </div>
            </el-form-item>
          </div>
        </BaseCollapse>
      </div>
      <!--      <div class="h-box justify-end mg-t-lg">-->
      <!--        <UpdateForm @success="loadDataCb()">-->
      <!--          <BaseButton type="add_icon_text" />-->
      <!--        </UpdateForm>-->
      <!--        <BaseButton @click="reloadDataCb()" type="refresh_icon_text" />-->
      <!--      </div>-->
    </template>
    <he-table
      @handle-current-change="getTableData"
      :total="tableData.total"
      v-model:page-size="formData.pageSize"
      v-model:page-num="formData.pageNum"
      operate-width="180px"
      :operate-list="[]"
      :table-data="tableData.list"
      :column-data="pageData.columnData"
      :show-multiple="false"
      :show-summary="false"
      :show-operate="false"
      :show-multiple-column="false"
      :show-pagination="false"
      :loading="loading"
    >
      <template #plug_classDefault="{ data }">
        {{ data.row.plug_class == "未知封堵" ? "第三方封堵" : data.row.plug_class }}
      </template>
      <template #operationDefault="{ data }">
        <UpdateForm
          :row-data="{
            id: data.row.id,
            ifname:data.row.ifname
          }"
          :title="`编辑阻断策略`"
          @success="getTableData"
        >
          <base-button type="edit_text"></base-button>
        </UpdateForm>
      </template>
    </he-table>
  </BaseUpDown>
</template>
